<!DOCTYPE html>
<html lang="en">

<head>
    <title>练习</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="item">
            <button v-on:click="add">添加</button>
        </div>
        <hr>
        <ul>
            <li v-for="todo in todos">{{todo}}</li>
        </ul>

    </div>

</body>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: '',
            todos: ["学习Vue", "学习django继承", "学习django前台"],
            item: ''
        },
        methods: {
            add: function () {
                alert(this.item)
                // 添加到列表中
                this.todos.push(this.item)
                this.item = ''
            }
        }
    })

</script>

</html>